import React, { memo, useState } from 'react';
import _ from 'lodash';
import Highlighter from 'react-highlight-words';
import { Search } from '@/assets/icons';
import styles from '../index.less';

export default memo(
  ({
    nanoid,
    label,
    pList,
    selectList,
    checkedList,
    handleCheckChange,
    handleClearChecked,
  }) => {
    // console.log('========view content create or update========');
    const checkedIds = _.map(checkedList || [], 'id');

    const [searchKey, setSearchKey] = useState('');
    const selectListBySearchFilter = _.filter(
      selectList,
      ({ label }) => _.includes(label, searchKey), // searchKey = ''  ==>  true
    );

    return (
      <div className={styles.cubeDropContentDetail}>
        <div className={styles.cubeDropContentBreadcrumb}>
          {_.concat(_.map(pList, 'label'), [label]).join(' / ')}
        </div>
        <div className={styles.cubeDropContentSearch}>
          <div className={styles.inputSearchIcon}>
            <Search />
          </div>
          <input
            type="text"
            value={searchKey}
            placeholder={'Search'}
            onChange={(e) => {
              setSearchKey(e.target.value);
            }}
          />
          {!!searchKey && (
            <span
              className={styles.inputCleanIcon}
              onClick={() => {
                setSearchKey('');
              }}
            />
          )}
        </div>
        <div className={styles.cubeDropContentSelectControl}>
          {!!checkedIds.length && (
            <span
              className={styles.cubeDropContentSelectControlClear}
              onClick={() => {
                handleClearChecked({ nanoid });
              }}
            >
              Clear All
            </span>
          )}
          <span>{checkedIds.length} selected</span>
        </div>
        <div className={styles.cubeDropContentSelectList}>
          {selectListBySearchFilter.length ? (
            selectListBySearchFilter.map(
              ({ id, label, value, ...restOpts }) => (
                <label
                  key={id}
                  className={styles.cubeDropContentSelectListItem}
                >
                  <input
                    type="checkbox"
                    checked={_.includes(checkedIds, id)}
                    name={id}
                    onChange={(e) => {
                      handleCheckChange({
                        nanoid,
                        item: { id, label, value, ...restOpts },
                        status: e.target.checked,
                      });
                    }}
                  />
                  <Highlighter
                    autoEscape
                    caseSensitive
                    highlightStyle={{ color: 'orange', padding: 0 }}
                    searchWords={searchKey ? [searchKey] : []}
                    textToHighlight={label}
                  />
                  <span>{value}</span>
                </label>
              ),
            )
          ) : (
            <div className={styles.cubeDropContentSelectListEmpty}>
              nothing..
            </div>
          )}
        </div>
      </div>
    );
  },
  (prevProps, nextProps) =>
    prevProps.selectList === nextProps.selectList &&
    prevProps.checkedList === nextProps.checkedList,
);
